import { Menu } from 'antd'
import { useNavigate } from 'react-router-dom'
// 获取仓库中的menulist
import { useSelector } from 'react-redux'


const MyMenu = () => {

    const navigate = useNavigate();
    
    const menuList = useSelector(state => state.menuList)

    const handleClick = (data) => {
        const { key } = data;
        
        navigate(key)
    }

    return <div className="menu">
        <Menu
            onClick={handleClick} // 点击菜单时触发的回调函数
            mode="inline"
        >
            {
                menuList.map((item, idx) => {
                    return <Menu.Item key={item.path}>{item.title}</Menu.Item>
                })
            }
             
        </Menu>
    </div>
}

export default MyMenu